<template>
	<view class="input-area">
		<u-subsection :list="tabList" mode="button" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="content">
			<view v-if="curNow===0">
				<home-recommend></home-recommend>
			</view>
			<view v-if="curNow===1">
				<home-cate></home-cate>
			</view>
			<view v-if="curNow===2">
				<home-album></home-album>
			</view>
			<view v-if="curNow===3">
				<home-new></home-new>
			</view>
		</view>
	</view>
</template>

<script>
	import {swiperList} from "@/api/home"
	import homeAlbum from "./home-album/index.vue"
	import homeCate from "./home-cate/index.vue"
	import homeNew from "./home-new/index.vue"
	import homeRecommend from "./home-recommend/index.vue"
	export default{
		components:{
			homeAlbum,
			homeCate,
			homeNew,
			homeRecommend
		},
		data(){
			return{
				tabList: [
					{
						name: '推荐'
					},
					{
						name: '分类'
					}, 
					{
						name: '专辑'
					},
					{
						name: '最新'
					}
				],
				curNow:0
			}
		},
		onLoad() {
		},
		methods:{
			sectionChange(index){
				console.log(index)
				this.curNow = index;
			}
		}
	}
</script>

<style lang="scss">
	.input-area{
		.item{
			width: 200px;
			height: 200px;
			background-color: #007AFF;
		}
	}
</style>
